<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图1</title>
    <style>
        .lunbo {
            width: 900px;
            height: 400px;
            margin: 100px auto;
        }

        .lunbo img {
            width: 100%;
            height: 100%;
        }
        .tleft{
            position: absolute;
            top: 230px;
            left: 330px;
            font-size: 80px;
            color: aliceblue;
            cursor: pointer;/*显示小手指样式*/
        }
        .tright{
            position: absolute;
            top: 230px;
            right: 330px;
            font-size: 80px;
            color: aliceblue;
            cursor: pointer;/*显示小手指样式*/
        }
    </style>
</head>

<body>
    <a  class="tleft" onclick="toleft()"><</a>
    <div class="lunbo">
        <img id="image" src="images/1.jpg" onmouseover="stopimg()" onmouseout="startimg()">
    </div>
    <span class="tright" onclick="toright()">></span>
    <script>
        var index = 1;
        var time=setInterval(lunbo,2000);//定时器
        function lunbo() {//轮播显示
            index++;
            if (index > 3) {
                index = 1;
            }
            var img = document.getElementById("image");
            img.src = "images" + index + ".jpg";
        }

        var toleft=function(){//上一页
            clearInterval(time);
            if(index==1){
                index=3
            }
            else{
                index--;
            }
            let img = document.getElementById("images");
            img.src="images" + index + ".jpg";
            time=setInterval(lunbo,2000);
        }
        var toright=function(){//下一页
            clearInterval(time);
            if(index==3){
                index=1
            }
            else{
                index++;
            }
            let img = document.getElementById("images");
            img.src="images" + index + ".jpg";
            time=setInterval(lunbo,2000);
        }

        var stopimg=function(){//鼠标悬停，图片暂停
            clearInterval(time);
        }

        var startimg=function(){//鼠标离开
            time=setInterval(lunbo,2000);
        }
        //setInterval(lunbo, 200);
    //切记定时器里调用lunbo方法不能加(),setInterval(lunbo,2000);如果加()会执行lunbo（）方法，而导致定时器没用。
    </script>
</body>

</html>

